<template>
    <div>
        <p>simple table demo <el-button @click="submit">提交</el-button></p>
        <el-table
                :data="tableData"
               >
            <el-table-column
                    prop="date"
                    label="日期"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="province"
                    label="省份"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="city"
                    label="市区"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="邮编"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="邮编"
                    width="120">
                <template slot-scope="scope">
                    <el-radio-group  v-model="scope.row.select" @change="radioChange">
                        <el-radio :label="1">备选项</el-radio>
                        <el-radio :label="6">备选项</el-radio>
                        <el-radio :label="9">备选项</el-radio>
                    </el-radio-group>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50]"
                :page-size= pageSize
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import {table as api} from '@/api/api'
    export default {
        name: "simple",
        data(){
            return {
                pageNo: 1,
                pageSize: 10,
                total: 0,
                tableData: [],

                radio: '1'
            }
        },
        activated() {
           this.queryList();
        },
        methods: {
            queryList(){
                api.list({
                    pageSize: this.pageSize,
                    pageNo: this.pageNo
                }).then(data => {
                    console.log(data)
                    if (data.code === '00000') {
                        let result = data.data;
                        this.total = result.total;
                        this.tableData =result.list;
                    }
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val
                this.queryList();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.queryList();
            },
            radioChange(v1){
                this.$message.info(v1)
            },
            submit(){
                let list = []
                this.tableData.forEach(item =>{
                    list.push(item.select)
                })
                console.log(list);
            }
        },
    }
</script>

<style scoped>

</style>
